/**
 * 磅房设置页面
 */
import { SystemWrapper, TableWrapper, WeighingBox } from "./style";
import WeightSet from "./components/weightSet";
import GoodsList from "./components/goodsList";
import { Button, Form, Input, message, Modal, Switch } from "antd";
import { useCallback, useEffect, useState } from "react";
import {
  getGbSystemSetLedSwitch,
  getGbSystemSetPoundList,
  getGbSystemSetShutDown,
  getGbSystemSetSoundSwitch,
  getGbSystemSetStart,
  ICarIndentifyType,
  ICatchSet,
  IGbSystemSetLedSwitchParams,
  IMonitorType,
  IPoundType,
  IPoundTypeLedList,
  IPoundTypeSpeakList,
  ISensorType,
  IWeightReadType,
  postGbSystemSetDeletePound,
  postGbSystemSetSetRange,
} from "./api";
import { PlusOutlined, EditOutlined } from "@ant-design/icons";
import AllMonitorSet from "./components/AllMonitorSet";
import CarIndentifySet from "./components/CarIndentifySet";
import CatchSet from "./components/CatchSet";
import AddWeight from "./components/AddWeight";
import SensorSet from "./components/SensorSet";
import WeightRead from "./components/WeightRead";
import { handleDeleteAssets } from "../../../assets/fun/Antd/deleteFun";
import { useWindowFontSize } from "../../../assets/fun/Antd/configprovider";
import LedParamsSet from "./components/LedParamsSet";
import SetUpAd from "./components/SetUpAd";
import SetAdLuminance from "./components/SetAdLuminance";
import SetUpAdcesi from "./components/SetUpAdcesi";
import VoiceParamsSet from "./components/VoiceParamsSet";
import VoiceTestSet from "./components/VoiceTestSet";
import GenerateQRCode from "./components/GenerateQRCode";
import ErweimaSaoma from "./components/ErweimaSaoma";

const SystemSettingPage = () => {
  const [form] = Form.useForm();
  const [listData, setListData] = useState<IPoundType[]>([]);
  const [bangId, setBangID] = useState<React.Key>();
  const [allowShow, setAllowShow] = useState(false);
  const [generateQRCodeShow, setGenerateQRCodeShow] = useState(false); // 生成二维码的弹窗
  const [bangfangId, setBangfangId] = useState<React.Key>(); // 磅房ID
  const handleOK = async () => {
    //postGbSystemSetSetRange
    const values = await form.validateFields();
    const params = {
      toleranceRange: values.toleranceRange,
      id: bangId,
    };
    const { code, msg } = (await postGbSystemSetSetRange(params)) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      listFun();
      setAllowShow(false);
      setBangID(undefined);
    } else {
      message.error(msg);
    }
  };

  const handleCancel = () => {
    setAllowShow(false);
    setBangID(undefined);
  };

  const handleDelete = (value?: number) => {
    handleDeleteAssets(
      async () => {
        return (await postGbSystemSetDeletePound({ id: value })) as {
          code: number;
          msg: string;
        };
      },
      () => {
        listFun();
      }
    );
  };

  //postGbSystemSetDeletePound

  const listFun = useCallback(async () => {
    const { code, msg, data } = (await getGbSystemSetPoundList()) as {
      code: number;
      msg: string;
      data: IPoundType[];
    };
    if (code === 20000) {
      console.log(data);

      setListData(data);
    } else {
      message.error(msg);
    }
  }, []);

  useEffect(() => {
    listFun();
  }, [listFun]);

  // 设置全流程监控变量
  const [allMonitorShow, setAllMonitorShow] = useState(false); //全流程监控的弹窗
  const [allMonitorData, setAllMonitorData] = useState<IMonitorType>(); //全流程监控的数据
  const handleMonitorBack = () => {
    setAllMonitorShow(false);
    setAllMonitorData(undefined);
    listFun();
  };
  //车号识别信息的变量
  const [vehicleShow, setVehicleShow] = useState(false); //车号识别信息的弹窗
  const [vehicleData, setVehicleData] = useState<ICarIndentifyType>(); //车号识别信息的数据
  const handleVehicleBack = () => {
    setVehicleShow(false);
    setVehicleData(undefined);
    listFun();
  };
  //抓拍机的信息变量
  const [catchShow, setCatchShow] = useState(false); //抓拍机的弹窗

  const [catchData, setCatchData] = useState<ICatchSet>(); //抓拍机的数据
  const handleCatchBack = () => {
    setCatchShow(false);
    setCatchData(undefined);
    listFun();
  };
  //添加称重磅
  const [addShow, setAddShow] = useState(false);
  const handleAddBack = () => {
    setAddShow(false);
    listFun();
  };
  //红外对射信息的变量

  const [redShow, setRedShow] = useState(false); //红外对射信息的弹窗
  const [redData, setRedData] = useState<ISensorType>(); //红外对射信息的数据
  const handleRedBack = () => {
    setRedShow(false);
    setRedData(undefined);
    listFun();
  };

  //称重仪表读取信息的变量

  const [weightReadShow, setWeightReadShow] = useState(false); //称重仪表读取信息的弹窗
  const [weightReadData, setWeightReadData] = useState<IWeightReadType>(); //称重仪表读取信息的数据

  // LED屏幕
  const [ledParamsSetShow, setLedParamsSetShow] = useState(false); // LED屏幕设置弹窗
  const [ledParamsSetData, setLedParamsSetData] = useState<IPoundTypeLedList>(); // LED屏幕设置数据
  // LED屏幕设置广告
  const [adShow, setAdShow] = useState(false); // LED屏幕设置广告弹窗
  const [adData, setAdData] = useState<IPoundTypeLedList>(); // LED屏幕设置广告数据
  // Led 屏幕广告亮度调节
  const [adLuminanceShow, setAdLuminanceShow] = useState(false); // LED屏幕设置广告亮度弹窗
  const [adLuminanceData, setAdLuminanceData] = useState<IPoundTypeLedList>(); // LED屏幕设置广告亮度数据
  // Led广告屏幕测试
  const [adTestShow, setAdTestShow] = useState(false); // LED广告屏幕测试弹窗
  const [adTestData, setAdTestData] = useState<IPoundTypeLedList>(); // LED广告屏幕测试数据
  // 音柱设置
  const [voiceParamsSetShow, setVoiceParamsSetShow] = useState(false); // 音柱设置弹窗
  const [voiceParamsSetData, setVoiceParamsSetData] =
    useState<IPoundTypeSpeakList>(); // 音柱设置数据
  // 音柱测试
  const [voiceTestShow, setVoiceTestShow] = useState(false); // 音柱测试弹窗
  const [voiceTestData, setVoiceTestData] = useState<IPoundTypeSpeakList>(); // 音柱测试数据

  const handleWeightReadBack = () => {
    setWeightReadShow(false);
    setWeightReadData(undefined);
    listFun();
  };
  // LED屏幕参数设置
  const handleLedParamsSetBack = () => {
    setLedParamsSetShow(false);
    setLedParamsSetData(undefined);
    listFun();
  };
  // LED屏幕设置广告
  const handleAdBack = () => {
    setAdShow(false);
    setAdData(undefined);
  };
  // LED屏幕设置广告亮度
  const handleAdLuminanceBack = () => {
    setAdLuminanceShow(false);
    setAdLuminanceData(undefined);
  };
  // LED 开机
  const handleLedOpen = async (id: React.Key) => {
    const { code, msg } = (await getGbSystemSetStart({
      id,
    })) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      message.success("开机成功");
    } else {
      message.error(msg);
    }
  };
  // LED关机
  const handleLedClose = async (id: React.Key) => {
    const { code, msg } = (await getGbSystemSetShutDown({
      id,
    })) as {
      code: number;
      msg: string;
    };
    if (code === 20000) {
      message.success("关机成功");
    } else {
      message.error(msg);
    }
  };
  // LED广告屏幕测试
  const handleAdTestBack = () => {
    setAdTestShow(false);
    setAdTestData(undefined);
  };
  // 音柱设置
  const handleVoiceParamsSetBack = () => {
    setVoiceParamsSetShow(false);
    setVoiceParamsSetData(undefined);
    listFun();
  };
  // 音柱测试
  const handleVoiceTestBack = () => {
    setVoiceTestShow(false);
    setVoiceTestData(undefined);
  };
  // LED 屏幕开关
  const handleLedSwirch = async (show: boolean, id?: React.Key) => {
    if (id) {
      const params: IGbSystemSetLedSwitchParams = {
        id,
        isSwitch: show ? "1" : "0",
      };
      const { code, msg } = (await getGbSystemSetLedSwitch(params)) as {
        code: number;
        msg: string;
      };
      if (code === 20000) {
        message.success("设置成功");
        listFun();
      } else {
        message.error(msg);
      }
    } else {
      message.error("请先配置LED屏幕");
    }
  };
  // 音柱 屏幕开关
  const handleSpeakSwirch = async (show: boolean, id?: React.Key) => {
    if (id) {
      const params: IGbSystemSetLedSwitchParams = {
        id,
        isSwitch: show ? "1" : "0",
      };
      const { code, msg } = (await getGbSystemSetSoundSwitch(params)) as {
        code: number;
        msg: string;
      };
      if (code === 20000) {
        message.success("设置成功");
        listFun();
      } else {
        message.error(msg);
      }
    } else {
      message.error("请先配置音柱");
    }
  };
  return (
    <SystemWrapper>
      {/* 头部设置 */}
      <WeightSet />
      {/* 货品设置 */}
      <GoodsList />
      <Button
        icon={<PlusOutlined />}
        type="primary"
        onClick={() => setAddShow(true)}
      >
        增加称重磅
      </Button>
      {listData.map((item, index) => {
        return (
          <WeighingBox key={index}>
            <div className="weighing-title">
              <div className="title-right-box">
                <div className="title-bold">{item?.poundName}</div>
                <div
                  className="title-button"
                  onClick={() => {
                    form.setFieldsValue({
                      toleranceRange: item.toleranceRange,
                    });
                    setBangID(item.id);
                    setAllowShow(true);
                  }}
                >
                  允许容错范围: ± {item?.toleranceRange}kg
                  <EditOutlined style={{ marginLeft: "1.5rem" }} />
                </div>
              </div>
              <div style={{ display: "flex", alignContent: "center" }}>
                <div
                  className="title-left-box"
                  onClick={() => {
                    setGenerateQRCodeShow(true);
                    setBangfangId(item.id);
                  }}
                >
                  <span
                    className="iconfont"
                    style={{ fontSize: "1.6rem", marginRight: "1rem" }}
                  >
                    &#xe621;
                  </span>
                  <span>生成称重二维码</span>
                </div>
                <div
                  className="title-left-box"
                  onClick={() => {
                    handleDelete(item.id as number);
                  }}
                >
                  <span
                    className="iconfont"
                    style={{ fontSize: "1.6rem", marginRight: "1rem" }}
                  >
                    &#xe61c;
                  </span>
                  <span>删除称重磅</span>
                </div>
              </div>
            </div>
            <TableWrapper>
              {/* 全流程监控设置 */}
              <div className="table-box">
                <div className="item-title">
                  <div>全流程监控设置</div>
                  <Button
                    type="link"
                    onClick={() => {
                      setAllMonitorShow(true);
                      setAllMonitorData(item.monitorList);
                    }}
                  >
                    设置参数
                  </Button>
                </div>
                <div className="item-table">
                  <div className="item-table-head">
                    <div style={{ flex: 2 }}>RTSP地址</div>
                    <div>通道号</div>
                    <div>截取录像前(秒)</div>
                    <div>截取录像后(秒)</div>
                    <div>储存位置</div>
                  </div>
                  <div className="item-table-data">
                    <div className="flex1" style={{ flex: 2 }}>
                      {item?.monitorList?.rtspAddress}
                    </div>
                    <div className="flex1">{item?.monitorList?.channelNum}</div>
                    <div className="flex1">
                      {item?.monitorList?.clipVideoBefore}
                    </div>
                    <div className="flex1">
                      {item?.monitorList?.clipVideoAfter}
                    </div>
                    <div className="flex1">
                      {item?.monitorList?.saveLocation}
                    </div>
                  </div>
                </div>
              </div>
              {/* 车号识别信息 */}
              <div className="table-box">
                <div className="item-title">
                  <div>车号识别信息</div>
                </div>
                <div className="item-table">
                  <div className="item-table-head">
                    <div>设备序列号</div>
                    <div>IP地址</div>
                    <div>SDK端口号</div>
                    <div>用户名</div>
                    <div>密码</div>
                    <div>道闸端口号</div>
                    <div>标识</div>
                    <div>操作</div>
                  </div>
                  <div className="item-flex">
                    {/* item.carIndentifyList是一个数组 要求循环 */}
                    {item?.carIndentifyList?.map((v, i) => {
                      return (
                        <div className="item-table-data" key={i}>
                          <div>{v?.deviceNumber}</div>
                          <div>{v?.ipAddress}</div>
                          <div>{v?.sdkPort}</div>
                          <div>{v?.userName}</div>
                          <div>{v?.password}</div>
                          <div>{v?.barrierPort}</div>
                          <div>{v?.sign}</div>
                          <div>
                            <Button
                              type="link"
                              onClick={() => {
                                setVehicleShow(true);
                                setVehicleData(v);
                              }}
                            >
                              设置参数
                            </Button>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
              {/* 抓拍机信息 */}
              <div className="table-box">
                <div className="item-title">
                  <div>抓拍机信息</div>
                </div>
                <div className="item-table">
                  <div className="item-table-head">
                    <div>抓拍机名称</div>
                    <div>设备序列号</div>
                    <div>IP地址</div>
                    <div>SDK端口号</div>
                    <div>用户名</div>
                    <div>密码</div>
                    <div>操作</div>
                  </div>
                  <div className="item-flex">
                    {item?.catchList?.map((element, ii) => {
                      return (
                        <div className="item-table-data" key={ii}>
                          <div>{element?.catchName}</div>
                          <div>{element?.deviceNumber}</div>
                          <div>{element?.ipAddress}</div>
                          <div>{element?.sdkPort}</div>
                          <div>{element?.userName}</div>
                          <div>{element?.password}</div>
                          <div>
                            <Button
                              type="link"
                              onClick={() => {
                                setCatchShow(true);
                                setCatchData(element);
                              }}
                            >
                              设置参数
                            </Button>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
              {/* 红外对射信息 */}
              <div className="table-box">
                <div className="item-title">
                  <div>红外对射信息(字段未定)</div>
                  <Button
                    type="link"
                    onClick={() => {
                      setRedShow(true);
                      setRedData(item?.sensorList);
                    }}
                  >
                    设置参数
                  </Button>
                </div>
                <div className="item-table">
                  <div className="item-table-head">
                    <div>设备序列号</div>
                    <div>IP地址</div>
                    <div>SDK端口号</div>
                    <div>用户名</div>
                    <div>密码</div>
                    <div>道闸端口号</div>
                  </div>
                  <div className="item-flex">
                    <div className="item-table-data">
                      <div>{item?.sensorList?.deviceNumber}</div>
                      <div>{item?.sensorList?.ipAddress}</div>
                      <div>{item?.sensorList?.sdkPort}</div>
                      <div>{item?.sensorList?.userName}</div>
                      <div>{item?.sensorList?.password}</div>
                      <div>{item?.sensorList?.barrierPort}</div>
                    </div>
                  </div>
                </div>
              </div>
              {/* 称重仪表读取信息 */}
              <div className="table-box">
                <div className="item-title">
                  <div>称重仪表读取信息(字段未定)</div>
                  <Button
                    type="link"
                    onClick={() => {
                      setWeightReadShow(true);
                      setWeightReadData(item?.weightReadList);
                    }}
                  >
                    设置参数
                  </Button>
                </div>
                <div className="item-table">
                  <div className="item-table-head">
                    <div>设备序列号</div>
                    <div>IP地址</div>
                    <div>SDK端口号</div>
                    <div>用户名</div>
                    <div>密码</div>
                    <div>操作</div>
                  </div>
                  <div className="item-flex">
                    <div className="item-table-data">
                      <div>{item?.weightReadList?.deviceNumber}</div>
                      <div>{item?.weightReadList?.ipAddress}</div>
                      <div>{item?.weightReadList?.sdkPort}</div>
                      <div>{item?.weightReadList?.userName}</div>
                      <div>{item?.weightReadList?.password}</div>
                      <div>{item?.weightReadList?.barrierPort}</div>
                    </div>
                  </div>
                </div>
              </div>
              {/* LED 屏参数设置 */}
              <div className="table-box">
                <div className="item-title">
                  <div style={{ display: "flex", alignItems: "center" }}>
                    LED 屏参数设置
                    {item.ledList && (
                      <Switch
                        checked={item.ledList.isSwitch === 0 ? false : true}
                        onChange={(show) =>
                          handleLedSwirch(show, item.ledList.id)
                        }
                        style={{ marginLeft: "2rem" }}
                      />
                    )}
                  </div>
                  <Button
                    type="link"
                    onClick={() => {
                      setLedParamsSetShow(true);
                      setLedParamsSetData(item?.ledList);
                    }}
                  >
                    设置参数
                  </Button>
                </div>
                <div className="item-table">
                  <div className="item-table-head">
                    <div>IP地址</div>
                    <div>端口号</div>
                    <div>分区ID</div>
                    <div>操作</div>
                  </div>
                  <div className="item-flex">
                    <div className="item-table-data">
                      <div>{item?.ledList?.ledIp}</div>
                      <div>{item?.ledList?.ledPort}</div>
                      <div>{item?.ledList?.zoneId as string}</div>
                      <div>
                        <Button
                          type="link"
                          onClick={() => {
                            setAdShow(true);
                            setAdData(item?.ledList);
                          }}
                        >
                          设置广告
                        </Button>
                        <Button
                          type="link"
                          onClick={() => {
                            setAdLuminanceShow(true);
                            setAdLuminanceData(item?.ledList);
                          }}
                        >
                          设置亮度
                        </Button>
                        <Button
                          type="link"
                          onClick={() => handleLedOpen(item.ledList.id)}
                        >
                          开机
                        </Button>
                        <Button
                          type="link"
                          onClick={() => handleLedClose(item.ledList.id)}
                        >
                          关机
                        </Button>
                        <Button
                          type="link"
                          onClick={() => {
                            setAdTestShow(true);
                            setAdTestData(item?.ledList);
                          }}
                        >
                          测试
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {/*音柱设置设置 */}
              <div className="table-box">
                <div className="item-title">
                  <div style={{ display: "flex", alignItems: "center" }}>
                    音柱设置
                    {item.speakList && (
                      <Switch
                        checked={item.speakList.isSwitch === 0 ? false : true}
                        onChange={(show) =>
                          handleSpeakSwirch(show, item.speakList.id)
                        }
                        style={{ marginLeft: "2rem" }}
                      />
                    )}
                  </div>
                  <Button
                    type="link"
                    onClick={() => {
                      setVoiceParamsSetShow(true);
                      setVoiceParamsSetData(item?.speakList);
                    }}
                  >
                    设置参数
                  </Button>
                </div>
                <div className="item-table">
                  <div className="item-table-head">
                    <div>HTTP接口地址</div>
                    <div>实例KEY</div>
                    <div>实例API_KEY</div>
                    <div>终端ID</div>
                    <div>播放声音</div>
                    <div>重复次数</div>
                    <div>重复播放间隔</div>
                    <div>操作</div>
                  </div>
                  <div className="item-flex">
                    <div className="item-table-data">
                      <div>{item?.speakList?.httpAddress}</div>
                      <div>{item?.speakList?.instanceKey}</div>
                      <div>{item?.speakList?.instanceApiKey}</div>
                      <div>{item?.speakList?.terminalId}</div>
                      <div>
                        {item?.speakList?.voiceType === "0" ? "男声" : "女声"}
                      </div>
                      <div>{item?.speakList?.repeatTimes}</div>
                      <div>{item?.speakList?.repeatInterval}</div>

                      <div>
                        <Button
                          type="link"
                          onClick={() => {
                            setVoiceTestShow(true);
                            setVoiceTestData(item?.speakList);
                          }}
                        >
                          测试
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {/* 磅房二维码设备序列号设置 */}
              <ErweimaSaoma data={item.cardNum} id={item.id} handleCallback={() => {
                listFun()
              }} />
            </TableWrapper>
          </WeighingBox>
        );
      })}

      <Modal
        width={useWindowFontSize(480)}
        title={"设置容错范围"}
        open={allowShow}
        onOk={handleOK}
        onCancel={handleCancel}
        getContainer={false}
      >
        <Form
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 15 }}
          labelAlign="right"
        >
          <Form.Item
            label="允许容错范围(kg)"
            name="toleranceRange"
            //本次的提货范围不能小于上次的提货范围
            rules={[{ required: true, message: "请输入允许容错范围!" }]}
          >
            <Input
              placeholder="请输入数字"
              maxLength={7}
              style={{ width: "100%" }}
              type="number"
            />
          </Form.Item>
        </Form>
      </Modal>

      {/* 全部流程监控设置 */}
      <AllMonitorSet
        listData={allMonitorData}
        addShow={allMonitorShow}
        handleCallBack={handleMonitorBack}
      />
      {/* 车号信息设置 */}
      <CarIndentifySet
        listData={vehicleData}
        addShow={vehicleShow}
        handleCallBack={handleVehicleBack}
      />
      {/* 抓拍机信息设置 */}
      <CatchSet
        listData={catchData}
        addShow={catchShow}
        handleCallBack={handleCatchBack}
      />
      {/* 红外对射信息设置 */}
      <SensorSet
        listData={redData}
        addShow={redShow}
        handleCallBack={handleRedBack}
      />
      {/* 称重仪表读取信息设置 */}
      <WeightRead
        listData={weightReadData}
        addShow={weightReadShow}
        handleCallBack={handleWeightReadBack}
      />
      {/* 添加称重仪表 */}
      <AddWeight oneShow={addShow} handleCallBack={handleAddBack} />
      {/* LED 屏参数设置 */}
      <LedParamsSet
        ledParamsSetData={ledParamsSetData}
        ledParamsSetShow={ledParamsSetShow}
        handleCallBack={handleLedParamsSetBack}
      />
      {/* LED屏幕设置广告 */}
      <SetUpAd
        open={adShow}
        clickId={adData?.id}
        handleCallBack={handleAdBack}
      />
      {/* LED屏幕设置广告亮度 */}
      <SetAdLuminance
        open={adLuminanceShow}
        clickId={adLuminanceData?.id}
        handleCallBack={handleAdLuminanceBack}
      />
      {/* LED广告屏幕测试 */}
      <SetUpAdcesi
        open={adTestShow}
        clickId={adTestData?.id}
        handleCallBack={handleAdTestBack}
      />
      {/* 音柱设置 */}
      <VoiceParamsSet
        voiceParamsSetData={voiceParamsSetData}
        voiceParamsSetShow={voiceParamsSetShow}
        handleCallBack={handleVoiceParamsSetBack}
      />
      {/* 音柱测试 */}
      <VoiceTestSet
        voiceTestShow={voiceTestShow}
        clickId={voiceTestData?.id}
        handleCallBack={handleVoiceTestBack}
      />
      {/* 生成二维码 */}
      <GenerateQRCode
        isModalOpen={generateQRCodeShow}
        handleCancel={() => {
          setGenerateQRCodeShow(false);
          setBangfangId(undefined);
        }}
        id={bangfangId}
      />
    </SystemWrapper>
  );
};

export default SystemSettingPage;
